<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%-- <shiro:hasRole name="user"></shiro:hasRole>  --%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>layout 后台大布局 - Layui</title>
		<link rel="stylesheet" href="${webPath}/lib/layim/layui/css/layui.css">
		<link rel="stylesheet" type="text/css" href="${webPath}/css/hp-layui.css" />
        <link rel="shortcut icon" href="favicon.ico" />
	</head>

	<body class="layui-layout-body hp-white-theme">
		<img src="http://layim.layui.com/images/logo.png?v=v3" class="site-layim-logo" alt="layim，拉近用户与Web间的距离">
			<script src="${webPath}/lib/layim/layui/layui.js"></script>
			<script>
	layui.use(['layim'], function(layim) {
		var socket = layui.socket;
		var $ = layui.$;
		//websocket链接地址
		var socket = new WebSocket('ws://'+window.location.host+'/layim');
		//基础配置
		  layim.config({
			init : {
				url : "${webPath}/layimController/init"
			} ,//获取主面板列表信息，下文会做进一步介绍

			//获取群员接口（返回的数据格式见下文）
			
			members : {
				url : '${webPath}/layimController/getMembers' 
				,
				type : 'get' //默认get，一般可不填
				,
				data : {}
			//额外参数
			},

			//上传图片接口（返回的数据格式见下文），若不开启图片上传，剔除该项即可
			
			uploadImage : {
				url : '',//接口地址
				type : 'post' //默认post
			},

			//上传文件接口（返回的数据格式见下文），若不开启文件上传，剔除该项即可
			
			uploadFile : {
				url : '', //接口地址
				type : 'post' //默认post
			}
			
         ,title: '我的webim' 
         ,copyright:true
         , initSkin: '1.jpg' //1-5 设置初始背景
         , notice: true //是否开启桌面消息提醒，默认false
         , msgbox: "${webPath}/chatController/msgbox.hp" //消息盒子页面地址，若不开启，剔除该项即可
         , find: layui.cache.dir + 'css/modules/layim/html/find.hp' //发现页面地址，若不开启，剔除该项即可
         , chatLog: '${webPath}/layimController/chatlogPage' //聊天记录页面地址，若不开启，剔除该项即可
			});  
			//连接成功时触发
			socket.onopen = function() {
				console.log("socket链接ing");
			};
			
			//每当你发送一个消息，都可以通过该事件监听到
			layim.on('sendMessage', function(res) {
				console.log(res)
				socket.send(JSON.stringify({
					//随便定义，用于在服务端区分消息类型
					emit : 'chatMessage',
					data : res
				}));
			});
				//监听收到的消息
			socket.onmessage = function(res) {
				var data = JSON.parse(res.data);
				var emit = data.emit
				var magdata = data.data;
				 if(emit === 'chatMessage'){
					    layim.getMessage(magdata); //res.data即你发送消息传递的数据（阅读:监听发送的消息）
			      }else if(emit === 'offLineMsg'){
						 layer.msg('您有'+magdata.length+'条消息未读');
						 layui.each(magdata, function(index,item){
					    	 layim.getMessage(item);
					     });
					 }
			};
			 var userId = '${user.id}';
			 var stamp = document.getElementById("layim-friend"+userId);
			// 设置按钮为不可用
			 stamp.disabled=true;
			
	});
</script>
	</body>

</html>